<template>
  <div class="warp-box">
    <div class="nav-box mb-[32px]">
      <div class="nav-left">
        <template v-for="(item, index) in navLeft">
          <div
            :class="[item.key === navItem && 'active']"
            class="nav-item"
            @click="navItemClick(item)"
          >
            {{ item.name }}
          </div>
        </template>
      </div>
      <div class="nav-right">
        <template v-for="(item, index) in navRight">
          <div
            :class="[item.key === navItem && 'active']"
            class="nav-item"
            @click="navItemClick(item)"
          >
            {{ item.name }}
          </div>
        </template>
      </div>
    </div>
    <a-spin :spinning="spinning">
      <div class="center-box temp-box flex justify-center">
        <img src="./temp/temp1.png"  class="mx-[20px] h-[595px] w-[630px]"  alt=""/>
        <img src="./temp/temp3.png" class="mx-[20px] h-[595px]  w-[443px]"   alt=""/>
        <img src="./temp/temp2.png"   class="mx-[20px] h-[595px]  w-[566px]" alt=""/>
      </div>
    </a-spin>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const spinning = ref(false)
const navLeft = [
  {
    name: '运行参数',
    key: '1'
  },
  {
    name: '电表参数',
    key: '2'
  },
  {
    name: '电表参数',
    key: '3'
  }
]
const navRight = [
  {
    name: '日报表',
    key: '4'
  },
  {
    name: '月报表',
    key: '5'
  },
  {
    name: '年报表',
    key: '6'
  }
]

const navItem = ref('1')
const navItemClick = (item) => {
  navItem.value = item.key
  spinning.value = true
  setTimeout(() => {
    spinning.value = false
  }, 1000)
}
</script>

<style lang="scss" scoped>
.warp-box {
  padding: 107px 32px;
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.nav-box {
  display: flex;
  justify-content: space-evenly;
  padding-top: 32px;
}

.nav-left,
.nav-right {
  display: flex;
  justify-content: space-between;
}

.nav-item {
  background-image: url('@/assets/images/btn-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 168px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
  margin: 0 4px;
  &:hover {
    background-image: url('@/assets/images/btn-bg-active.png');
  }
}

.nav-item.active {
  background-image: url('@/assets/images/btn-bg-active.png');
}

.center-box {
  height: 100%;
  overflow-y: auto;
  //padding-top: 46px;
}

</style>
